<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>视差动画</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
              list-style:none;
            }
            html,body{
                height: 100%;
            }
            body{
                background: url('../../img/scenery1/1 (1).jpg') no-repeat;
                -webkit-background-size: cover;
                background-size: cover;
            }
            .parallax-window{
                height: 100%;
            }
            .demo{
                width: 800px;
                height: 800px;
                background-color: #fff;
                margin: 100px auto;
            }
            /* parallax需要他下面的元素透明 */
            /*.parallax-window {
                min-height: 400px;
                background: transparent;
            }*/
            .parallax-window{
              max-width: 600px;
              padding: 10px;
              position: relative;
              margin: 0 auto;
            }
            .img2{
              position: absolute;
              right: 0;
            }
        </style>
    </head>
    <body>
        <!-- <ul id="scene" class="parallax-window"
          data-calibrate-x="false"
          data-calibrate-y="true"
          data-invert-x="false"
          data-invert-y="true"
          data-limit-x="false"
          data-limit-y="10"
          data-scalar-x="2"
          data-scalar-y="8"
          data-friction-x="0.2"
          data-friction-y="0.8">
          <li class="layer" data-depth="0.40"><img src="../../img/poster.png"></li>
          <li class="layer" data-depth="1.00"><img src="../../img/tourism1.png"></li>
          <li class="layer" data-depth="0.40"><img src="../../img/tourism2.png"></li>
          <li class="layer" data-depth="0.60"><img src="../../img/anthentic.jpeg"></li>
          <li class="layer" data-depth="0.80"><img src="../../img/dizhen-img1.png"></li>
          <li class="layer" data-depth="1.00"><img src="../../img/emotion.png"></li>
        </ul> -->
        <!-- <div id="container" class="container">
          <div id="scene" class="scene">
            <div class="layer" data-depth="0.40"><img src="../../img/poster.png"></div>
            <div class="layer" data-depth="1.00"><img src="../../img/tourism1.png"></div>
            <div data-depth="1.00"><img src="images/layer1.png"></div>
            <div data-depth="0.80"><img src="images/layer2.png"></div>
            <div data-depth="0.60"><img src="images/layer3.png"></div>
            <div data-depth="0.40"><img src="images/layer4.png"></div>
            <div data-depth="0.20"><img src="images/layer5.png"></div>
            <div data-depth="0.00"><img src="images/layer6.png"></div>
          </div>
        </div> -->
        <div class="parallax-window">
          <div class="parallax-slider img1">
            <img src="../../img/poster.png">
          </div>
          <div class="parallax-slider">
            <img class="img2" src="../../img/tourism1.png">
          </div>
        </div>
        <p>然而运动量的改变不止依赖data-depth，还依赖于scalarX和ScalarY的值和父容器的尺寸。计算公式为xMotion = parentElement.width  * (scalarX / 100) * layerDepth，也就是说，当data-depth的值为0.20，scalarX为10，scalarY为10，父容器尺寸为1000px 500px时，它在x方向的运动量为20，在y方向的运动量为10。</p>
        <p>Parallax.js还可以配置一些参数。data-calibrate-x和data-calibrate-y用来指定是否根据初始时的x轴的值来计算运动量；data-invert-x和data-invert-y判断是否按反方向来运动层；data-limit-x和data-limit-y可以设置x或y方向上总的运动量数值范围，数值越大运动量范围越大；data-scalar-x和data-scalar-y为层运动的灵敏度，通过“20”和“8”的对比，明显发现“20”更灵敏；</p>
        <p>data-friction-x和data-friction-y设置层运动的摩擦量，数值为0-1，明显有摩擦的感觉，但是我的肉眼实在没看出来小数值和大数值摩擦感觉上的区别；data-origin-x和data-origin-y代表了鼠标输入的x或y原点，默认值是0.5，在我的理解就是：当数值越小的时候，运动层的运动就会越随着鼠标运动，反之，数值越大运动层的运动就会越向着鼠标运动的反向运动。</p>
        <!-- 第一种:使用data属性调用parallax.js插件 -->
        <!-- <div class="parallax-window" data-parallax="scroll" data-image-src="../../img/scenery1/1 (1).jpg"></div> -->
        <!-- 第一种:使用js调用parallax.js插件 -->
        <!-- 简单的的parallax.js示例 -->
        <!-- <div class="parallax-window">
            <div class="demo">
                <h1>parallax.js的使用</h1>
                <p><a href="https://github.com/pixelcog/parallax.js">来源</a></p>
                <h1></h1>
                <p><a href="http://www.jq22.com/jquery-info178">来源</a></p>
            </div>
        </div> -->
        <!-- 复杂的parallax.js示例 -->
        <!-- <div class="parallax-window">
          <div class="parallax-slider">
            <span style="position:absolute; top: 400px; left: 400px;">Some Text</span>
            <p>Some other Content</p>
          </div>
        </div> -->
        <!-- 响应式图片 -->
        <!-- <div class="parallax-window">
          <div class="parallax-slider">
            <img src="/path/to/image.jpg" srcset="/path/to/image-400px.jpg 400w, /path/to/image-800px.jpg 800w, /path/to/image-1200px.jpg 1200w" sizes="100vw">
          </div>
        </div> -->
        <!-- <ul id="scene">
          <li class="layer" data-depth="0.00"><img src="layer1.png"></li>
          <li class="layer" data-depth="0.20"><img src="layer2.png"></li>
          <li class="layer" data-depth="0.40"><img src="layer3.png"></li>
          <li class="layer" data-depth="0.60"><img src="layer4.png"></li>
          <li class="layer" data-depth="0.80"><img src="layer5.png"></li>
          <li class="layer" data-depth="1.00"><img src="layer6.png"></li>
        </ul> -->

        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/parallax.js"></script>
        <script>
        // $('.parallax-window').parallax({imageSrc: '../../img/scenery1/1 (1).jpg'});
            $('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
  });
            // jQuery(window).trigger('resize').trigger('scroll'); // 插入DOM后需要使用这个更新视差效果
            /* 需要设置宽高 */
            // $('.parallax-window').parallax({
            //     naturalWidth: 600,
            //     naturalHeight: 400
            //   });
              // $('#scene').parallax({
              //   calibrateX: false,
              //   calibrateY: true,
              //   invertX: false,
              //   invertY: true,
              //   limitX: false,
              //   limitY: 10,
              //   scalarX: 2,
              //   scalarY: 8,
              //   frictionX: 0.2,
              //   frictionY: 0.8
              // });
        </script>
    </body>
</html>